<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/base.js" ></script>
	</head>
	<body>
		<span>表单重复提交</span>
		<div>当一条数据提交到服务器的时候由于各种原因，出现延迟等长时间没反应，
		导致用户不停的点击提交从而使得重复提交了很多相同的请求或造成误写或写入数据库多条相同信息</div>
		<span>表单字段</span>
		<div>如果想要访问表单元素，可以使用之前的DOM访问。但使用原生的DOM访问虽然比较通用
		但是不是很便利。表单处理中，建议使用HTML DOM ，它有自己的element属性，该属性是表单中所有元素的集合
		<br />
		ps：表单控件指form里面的input,submit,,textarea,select等表单元素
		</div>
		
	
	</body>
	
		<form id="myform" name="youForm">
	姓名：<input type="text" name="user"/>	
	
	<input type="radio" name="sex" value="男" checked="checked" />男
	<input type="radio" name="sex" value="女"  />女
	<input id='sub' type="submit" value="提交" />
		<input type="reset" value="重置" />
	</form>
	
	
	<script>
		addEvent(window,'load',function(){
			var fm = document.getElementById('myform');
			var flag = false;
			//阻止提交
			addEvent(fm,'submit',function(eve){
				preDef(eve);
				
		
			alert('提交');
			
			//1 处理方法，提交后禁用按钮,这种方法只是限制按钮提交
			//document.getElementById('sub').disabled =true;
			
			//2 flag判断
			if(flag==true){
				return;
			}
			flag =true;//表示提交了一次
			
			
			
			//模拟延迟
			setTimeout(function(){
				fm.submit();
			},3000);//延迟3秒
				
			});
			//ps :f5只能浅刷新，即缓存级别的刷新，从源头刷新采用ctrl+f5即可
			
			
			//rest 事件，reset()方法
	/*		addEvent(fm,'rest',function(){
				alert('lee');
			});
			addEvent(document,'click',function(){
				fm.reset();
			});*/
			
			
			
			//表单(通过表单集合获取第一个元素，非表单控件会被忽略掉)。
	/*	alert(fm.elements);//表单控件的集合[object HTMLFormControlsCollection]
		alert(fm.length);//向下兼容，不推荐
		alert(fm[0]);//向下兼容，不推荐	*/
			
		/*alert(fm.elements.length);//推荐	
		alert(fm.elements[0]);//[object HTMLInputElement]
		alert(fm.elements['user']);//[object HTMLInputElement]*/
		
	/*	//name相同时
		var sexList = fm.elements['sex'];
		alert(sexList[0]);//
		alert(sexList[1].value);//女
		alert(sexList[0].name);//sex
		
		//禁用，无法点击
		sexList[1].disabled=true;
		
		alert(sexList[0].form);//得到从属的form对象
		alert(sexList[0].type);//radio
		
		sexList[0].type ='checkbox';//修改为多选框；不推荐使用*/
		
		
		//共有的表单字段方法
		var user =fm.elements['user'];
		//user.focus();//将鼠标焦点移入
		
		//user.blur();//将焦点移除
		
		//光标焦点移入时触发
		/*addEvent(user,'focus',function(){
			alert('focus');
		});*/
		
		//将光标移除时触发
		addEvent(user,'blur',function(){
			alert('blur');
		});
		
		//文本改变时触发
		addEvent(user,'change',function(){
			alert('change');
		});
		//ps ：change优先于blur发生
		
		
		
		
		
		
		
		
		
		
		
		
		});
	</script>
</html>
